import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image } from 'react-native';
import * as Progress from 'react-native-progress';
const styles = StyleSheet.create({

    tabText: {
        fontSize: 10,
        color: "#000",
    },
    tabValText: {
        fontSize: 12,
        color: "#333",
        textAlign: "right"
    },
    titleText: {
        fontSize: 12,
        color: "#B8B8B8"
    }

});
export default class Home_Details extends Component {

    static navigationOptions = props => {

        return {
            headerTitle: `#1燃气站运行概况          `,
            headerTintColor: "#fff",
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
                fontSize: 16
            },
            headerStyle: {
                backgroundColor: "#3296FA",
            }
        }
    };

    render() {
        const topClire = [
            {
                color: "#8A84EB",
                val: 90,
                name: "库存",
                unit: "(个)"
            },
            {
                color: "#54BBE4",
                val: 60,
                name: "库容",
                unit: "(个)"
            },
            {
                color: "#3296FA",
                val: 50,
                name: "库容占比",
                unit: " (%)"
            },
        ]

        const topClire2 = [
            {
                color: "#8A84EB",
                val: 90,
                name: "库存报警",
                unit: "(个)"
            },
            {
                color: "#54BBE4",
                val: 60,
                name: "泄漏报警",
                unit: "(个)"
            },
            {
                color: "#3296FA",
                val: 50,
                name: "报警处理率",
                unit: " (%)"
            },
        ]

        const topClire3 = [
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
        ]
        return (
            <ScrollView style={{ height: 900 }}>
                <View style={{ justifyContent: 'center', backgroundColor: "#F2F2F2" }}>
                    <View style={{ height: 150, backgroundColor: "#fff", flexDirection: "row", display: "flex", justifyContent: "space-around", alignItems: "center" }}>
                        {
                            topClire.map((item, index) => {
                                return (
                                    <View style={{ flex: 1, backgroundColor: "#fff", alignItems: "center" }} key={index}>
                                        <Progress.Circle size={80} thickness={6} strokeCap={"round"} showsText={true} formatText={() => {
                                            return ` ${item.val}\n${item.unit}`
                                        }} color={"#EAE9F1"} borderWidth={1} progress={1} unfilledColor={"#EAE9F1"} color={item.color} borderColor={"#fff"} />
                                        <Text style={{ marginTop: 5, fontSize: 16 }}>{item.name}</Text>
                                    </View>
                                )
                            })
                        }
                    </View>
                    <View style={{ height: 150, marginTop: 10, backgroundColor: "#fff" }}>
                        <View style={{ flex: 1.5, display: "flex", justifyContent: 'center', paddingLeft: 15 }}>
                            <Text style={{ fontSize: 16, color: "#000" }}>库存详情</Text>
                        </View>
                        <View style={{ display: "flex", flex: 4, borderTopWidth: 1, borderTopColor: "#ccc", backgroundColor: "#fff" }}>
                            <View style={{ paddingLeft: 15, flex: 1, paddingRight: 15, backgroundColor: "#fff", display: "flex", alignItems: 'center', flexDirection: "row" }}>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.titleText}>规格参数</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                            </View>
                            <View style={{ paddingLeft: 15, flex: 1, paddingRight: 15, backgroundColor: "#fff", display: "flex", alignItems: 'center', flexDirection: "row" }}>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.titleText}>昨日余气量</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                            </View>
                            <View style={{ paddingLeft: 15, flex: 1, paddingRight: 15, backgroundColor: "#fff", display: "flex", alignItems: 'center', flexDirection: "row" }}>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.titleText}>当日进气量</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                            </View>
                            <View style={{ paddingLeft: 15, flex: 1, paddingRight: 15, backgroundColor: "#fff", display: "flex", alignItems: 'center', flexDirection: "row" }}>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.titleText}>当日销售量</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.tabValText}>123</Text>
                                </View>
                            </View>
                        </View>

                    </View>

                    <View style={{ height: 150, marginTop: 10, backgroundColor: "#fff", flexDirection: "row", display: "flex", justifyContent: "space-around", alignItems: "center" }}>
                        {
                            topClire2.map((item, index) => {
                                return (
                                    <View style={{ flex: 1, backgroundColor: "#fff", alignItems: "center" }} key={index}>
                                        <Progress.Circle size={80} thickness={6} strokeCap={"round"} showsText={true} formatText={() => {
                                            return ` ${item.val}\n${item.unit}`
                                        }} color={"#EAE9F1"} borderWidth={1} progress={1} unfilledColor={"#EAE9F1"} color={item.color} borderColor={"#fff"} />
                                        <Text style={{ marginTop: 5, fontSize: 16 }}>{item.name}</Text>
                                    </View>
                                )
                            })
                        }
                    </View>

                    <View style={{ height: 600, marginTop: 10, backgroundColor: "#fff" }}>
                        <View style={{ flex: 0.1, display: "flex", justifyContent: 'center', paddingLeft: 15 }}>
                            <Text style={{ fontSize: 16, color: "#000" }}>报警详情</Text>
                        </View>

                        <View style={{ display: "flex", flex: 1, borderTopWidth: 1, borderTopColor: "#ccc", backgroundColor: "#fff" }}>
                            <ScrollView style={{ flex: 1 }}>
                                {
                                    topClire3.map((item, index) => {
                                        return (
                                            <View
                                                style={{ display: "flex", alignItems: 'center', flexDirection: "row", height: 110, paddingLeft: 10, backgroundColor: "#fff" }}
                                                key={index}
                                            >
                                                <Image
                                                    style={{ width: 70, height: 70 }}
                                                    source={require('../../../static/img/rqz.jpg')}
                                                />

                                                <View style={{ flex: 1, height: 110, padding: 3, borderBottomWidth: 1, borderBottomColor: "#ccc", paddingTop: 20 }}>
                                                    <View style={{ height: 35, backgroundColor: "#fff", display: "flex", alignItems: 'center', flexDirection: "row", justifyContent: 'center' }}>

                                                        <View style={{ flex: 3 }}>
                                                            <Text style={{ fontSize: 16, fontWeight: "900", color: "#000", paddingLeft: 10 }}>#企业1 #1燃气站</Text>
                                                        </View>
                                                        <View style={{ flex: 2, paddingRight: 10 }}>
                                                            <Text style={styles.tabValText}>2018/7/5 19:38</Text>
                                                        </View>


                                                    </View>
                                                    <View style={{ height: 35, display: "flex", alignItems: 'center', paddingLeft: 10, flexDirection: "row" }}>
                                                        <View style={{ flex: 3 }}>
                                                            <Text style={{ fontSize: 12, color: "#333", textAlign: "left" }}>35mg/m³ (基准值:20mg/m³)</Text>
                                                        </View>
                                                        <View style={{ flex: 1, paddingRight: 10 }}>
                                                            <Text style={styles.tabValText} style={{ backgroundColor: "#5CCEFB", textAlign: "center" }}>已解除</Text>
                                                        </View>
                                                    </View>
                                                </View>

                                            </View>
                                        )
                                    })
                                }

                            </ScrollView>
                        </View>

                    </View>
                </View>
            </ScrollView >
        )
    }
}